<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    <!--
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    -->
</head>

<body>
    <div id="app">
        <!--点击切换标签-->
        <!--组件-->
        <component_one></component_one>
        <component_two></component_two>
    </div>
    <!--vue2.0中好像废除次方法-->
    <script type="x-template" id="template_script">
        <h1>模板一</h1>
        <ul>
            <li v-for="item in fruits">{{item}}</li>
        </ul>
        <h1>模板一</h1>
    </script>
    <!--vue2.0中好像废除次方法-->
    <template id="template_template">
        <h1>模板er</h1>
        {{msg}}
        <ul>
            <li v-for="item in fruits">{{item}}</li>
        </ul>
        <h1>模板er</h1>
    </template>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'runoob',
                fruits: ['pear', 'apple', 'banana', 'orange', 'watermelon'],
            },
            components: {
                'component_one': {
                    data() {
                        return {
                            fruits: ['apple', 'orange', 'bananna']
                        }
                    },
                    methods: {},
                    template: '#template_script'
                },
                'component_two': {
                    data() {
                        return {
                            msg: '我是json对象',
                            fruits: ['apple', 'orange', 'bananna']
                        }
                    },
                    methods: {},
                    template: '#template_template'
                },
            }
        })
    </script>

</body>

</html>